import React from 'react';
import MyEchart from '../myEchart';
import jQuery from "jquery";
import Moment from "moment";

const globalConfig = require("../../js/globalConfig");
const utils = require("../../js/utils");

class Tem extends React.Component {
    constructor(props) {
        super(props);
        console.log(this.props.flag);
        this.state = {
            url: this.props.flag ? globalConfig.url + "/getMainTemperature" : globalConfig.url + "/getSubTemperature",
            isMount: true,
            option: {
                legend: {
                    data: ["电机", "卷筒左轴承座", "卷筒右轴承座", "导向轮"],
                    selectedMode:"single"
                },
                tooltip: {},
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        name: "小时(h)",
                    }
                ],
                yAxis: [
                    {
                        name: "温度(°C)",
                        type: 'value',
                    }
                ],
                series: [
                    {
                        symbol: 'circle',
                        name: "电机",
                        type: "line",
                        itemStyle: {
                            normal: {
                                color: '#91cc75',
                                lineStyle: {
                                    color:"#91cc75"
                                }
                            }
                        }
                    },
                    {
                        symbol: 'rect',
                        name: "卷筒左轴承座",
                        type: "line",
                        itemStyle: {
                            normal: {
                                color: '#ff7875',
                                lineStyle: {
                                    color: '#ff7875'
                                }
                            }
                        }
                    },
                    {
                        symbol: 'triangle',
                        name: "卷筒右轴承座",
                        type: "line",
                        itemStyle: {
                            normal: {
                                color: '#91d5ff',
                                lineStyle: {
                                    color: '#91d5ff'
                                }
                            }
                        }
                    },
                    {
                        symbol: 'diamond',
                        name: "导向轮",
                        type: "line",
                        
                        itemStyle: {
                            normal: {
                                color: '#eb2f96',
                                lineStyle: {
                                    color: '#eb2f96'
                                }
                            }
                        }
                    }
                ],
                grid: {
                    top: 50,
                    left: 45,
                    right: 60,
                    bottom: 25
                }
            },
        }
    }



    componentDidMount() {
        const instance = this.myEchart.echartsReact.getEchartsInstance();
        this.timerID = setInterval(() => {
            var this_ = this;
            
            if (this.state.isMount) {
                jQuery.ajax({
                    url: this_.state.url,
                    dataType: "JSON",
                    type: "POST",
                    data: {},
                    success: function (result) {
                        var xData = [];
                        var yData_1 = new Array(24).fill(0);
                        var yData_2 = new Array(24).fill(0);
                        var yData_3 = new Array(24).fill(0);
                        var yData_4 = new Array(24).fill(0);
                        var hour = new Date().getHours();
                        for (var i = 0; i < 24; i++) {
                            var time = hour - (23 - i);
                            time = time >= 0 ? time : 24 + time;
                            xData.push(utils.formatData(time));
                        }
                        var index = 0;
                        var beginTime = result[0].timeStamp.replace(/[ ]/g, "");;
                        for (; index < xData.length; index++) {
                            if (xData[index] === beginTime)
                                break;
                        }
                        for (var i = index; i >= 0 && index - i < result.length; i--) {
                            yData_1[i] = result[index - i].data_1;
                            yData_2[i] = result[index - i].data_2;
                            yData_3[i] = result[index - i].data_3;
                            yData_4[i] = result[index - i].data_4;
                        }

                        instance.setOption({
                            xAxis: { data: xData },
                            series: [
                                { data: yData_1 },
                                { data: yData_2 },
                                { data: yData_3 },
                                { data: yData_4 }
                            ]
                        });
                    }
                });
            }
        }, 500);
    }
    componentWillUnmount() {
        this.setState({ isMount: false });
        clearInterval(this.timerID);
    }
    render() {
        return (
            <MyEchart ref={e => { this.myEchart = e; }} option={this.state.option}/>
        );
    }
}

export default Tem;